<template>
	<div class="container">
		<!-- form -->
		<el-form
				:model="form.data"
				:rules="form.rules"
				label-width="100px"
				label-suffix=":"
				ref="form"
				style="width: 400px;"
		>
			<el-form-item label="原密码" prop="oldpassword">
				<el-input :type="type" v-model="form.data.oldpassword" placeholder="请输入原密码" clearable/>
			</el-form-item>
			<el-form-item label="新密码" prop="password">
				<el-input :type="type" v-model="form.data.password" placeholder="请输入新密码" clearable/>
			</el-form-item>
			<el-form-item label="确认密码" prop="rpwd">
				<el-input :type="type" v-model="form.data.rpwd" placeholder="请确认密码" clearable/>
			</el-form-item>
			<el-form-item>
				<el-button @click="resetForm">取 消</el-button>
				<el-button type="primary" @click="handleSubmit">确 定</el-button>
				<span class="show-password" @click="showThePassword">{{type == 'password' ? '显示密码' : '隐藏密码'}}</span>
			</el-form-item>
		</el-form>
		<!-- form end -->
	</div>
</template>

<script>
	import { bcSubmitAlert } from '@/utils/bc-form-data';
	import {getUserId, getUserInfo} from '@/utils/auth';
	import { changePwd } from '@/api/system/resetPwd';
	import BcValidate from '@/utils/bc-validate'

	export default {
		name: 'changePwd',
		data() {
			const checkPassRepeat = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.form.data.password) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				form: { // 表单
					data: {
						oldpassword: '',
						password: '',
						rpwd: ''
					},
					rules: {
						oldpassword: [{required: true, message: '请输入原密码', trigger: 'blur'}],
						password: [{required: true, validator: BcValidate.ruleValidator.validatePassWord, trigger: 'blur'}],
						rpwd: [{required: true, validator: checkPassRepeat, trigger: 'blur'}],
					}
				},
				type: 'password'
			}
		},
		created() {

		},
		methods: {

			// 表单提交
			handleSubmit() {
				this.$refs.form.validate(valid => {
					if(valid){
						let userId =  getUserId()
						let data = JSON.parse(JSON.stringify(this.form.data))
						data.userId = userId
						delete data.rpwd
						changePwd(data).then(res => {
							if(res.code ==1){
								this.$message.success('修改成功，请重新登录')
								this.$store.dispatch('user/logout')
								this.$router.push(`/login?redirect=${this.$route.fullPath}`)
								this.form.data = {
									oldpassword: '',
									password: '',
									rpwd: ''
								}
								this.$nextTick(() => {
									this.$refs.form.clearValidate()
								})
							}else{
								this.$message.error(res.msg)
							}

						})
					}
				});
			},

			showThePassword(){
				if(this.type == 'password') this.type = 'text'
				else this.type = 'password'
			},

			resetForm(){
				this.form.data = {
					curPwd: '',
					oldPwd: '',
					rpwd: ''
				}
				this.$nextTick(() => {
					this.$refs.form.clearValidate()
				})
			}
		}
	};
</script>
<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
		display: flex;
	}
	.show-password {
		float:right;
		text-decoration: underline;
		display: inline-block;
		margin-top: 8px;
		color: #999;
		cursor: pointer;
		&:hover {
			color: #1890ff;
		}
	}
</style>
